@import '../../../style/root.scss';
@import '../../../style/edit.scss';
@import "../../style/input.scss";
@include tip;
.point{
    background-color: #9497B1 !important;
}
.scroll{
    height: 100vh;
    @include padding-box(30rpx 0 0 0);
}
.container{
    padding: 0;
}
.head{
    @include padding-box(0 30rpx);
}
.contacts-list{
    display: flex;
    align-items: center;
    .contacts-i{

        width: 55rpx;
        height: 55rpx;
        // border: 1rpx solid #7FEABC;
        border-radius: 50%;
    }
    .contacts-i-active{
        margin-left: -30rpx;
    }
    .contacts-text{
        margin-left: 16rpx;
    }
}
.invite{
    margin-left: 10rpx;
}
.share-text-btn:not([size=mini]) {
    @include clear-btn;
    width: 55rpx;
    height: 55rpx;
    padding: 0;
    background: transparent;
    margin-left: -27.5rpx;
    z-index: 0;
  }
.head-top{
    .export{
        width: 202rpx;
        border-radius: 30rpx;
        background: $green;
    }
    .export-text{
        color: #FFFFFF;
        margin-left: 33rpx;
    }
    .export-bg{
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        background: #7FEABC;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .export-img{
        width: 40rpx;
        height: 40rpx;
    }
}
.input-box{
    // background: #FAFAFC;
    @include padding-box(30rpx 30rpx);
    margin-top: 0;
    .before-icon{
        left: 60rpx;
    }
    .input{
        border-radius: 44rpx;
        background: rgba(244, 244, 247, 1);
        border: none;
    }
}
.work-info{
    background: #EAEAEF;
    border-radius: 16rpx;
    @include padding-box(8rpx);
}
.info-top{
    position: relative;
    margin-top: 30rpx;  
    @include padding-box(28rpx 30rpx);
    
}
.info-top-time{
    font-weight: 500;
    display: flex;
    align-items: center;
    .success{
        width: 35rpx;
        height: 35rpx;
    }
}
.post-i{
    @include padding-box(30rpx 24rpx);
    background: $white;
    border-radius: 16rpx;
    position: relative;
}
.post-exit{
    width: 69rpx;
    height: 69rpx;
    position: absolute;
    top: 0;
    left: 0;
}
.post-head{
    @include space-between;
    .post-head-left{
        display: flex;
		align-items: center;
		width: 100%;
    }
}
.head-work-type{
    color: #FFFFFF;
    font-size: $font-mini;
    border-radius: 21rpx;
    @include padding-box(5rpx 14rpx);
    flex: none;
}
.head-work-type-active{
    background: $orange;
}

.head-title{
    color: $black;
    font-size: $font-normal;
    font-weight: bold;
    // margin-left: 8rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
}


.share-img{
    width: 144rpx;
    height: 60rpx;
}
.head-share-text{
    margin-left: 21rpx;
}
.post-body{
    @include space-between;
    margin-top: 28rpx;
}
.body-company{
    // $font-mini
    color: #565868;
    font-size: 28rpx;
}
.body-num{
    color: $orange;
    font-size: $font-normal;
    font-weight: bold;
    flex: none;
}
.text-grey{
    color: #C9CBD8 !important;
}
.welfare-list{
    display: flex;
    align-items: center;
    margin-top: 20rpx;
    flex-wrap: wrap;
}
.welfare-i{
    @include padding-box(13rpx);
    background: #F4F4F7;
    border-radius: 8px;
    color: $grey;
    font-size: $font-mini;
    margin-right: 20rpx;
    margin-top: 10rpx;
}
.post-foot{
    @include space-between;
    @include padding-box(19rpx 24rpx 11rpx 24rpx)

}
.list{
    @include padding-box(0 30rpx);
    position: sticky;
    .title-item{
        position: sticky;
        top: 0;
        z-index: 99;
        @include padding-box(20rpx 0);
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: rgba(32, 37, 54, 1);
        font-weight: 600;
        .title-item-left{
            display: flex;
            align-items: baseline;
        }
        .num{
            font-size: 72rpx;
        }
        .drop-down{
            width: 14rpx;
            height: 9rpx;
        }
        .total-num{
            color: rgba(148, 151, 177, 1);
            font-weight: 400;
            margin-left: 13rpx;
        }
    }
    
    .title-item-active{
        width: 100vw;
        @include padding-box(20rpx 30rpx);
        background: #F4F4F7;
        align-items: center;
    }
    .info-box{
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        border-bottom: 1rpx solid #EFF2F5;
        @include padding-box(30rpx 0 0 0);
        margin-bottom: 30rpx;
        .information{
            margin-left: 24rpx;
        }
        .info-head{
            color: #202536;
            font-size: 32rpx;
            margin-bottom: 24rpx;
        }
        .sex{
            width: 32rpx;
            height: 32rpx;
            margin-right: 8rpx;
        }
        .age{
            color: #ffffff;
            @include padding-box(5rpx 10rpx);
            border-radius: 35rpx;
            background: #9497B1;
            font-size: 24rpx;
        }
        .info-body{
            margin-bottom: 16rpx;
            .title{
                color: #565868;

            }
        }
        .info-foot{
            margin-bottom: 30rpx;
        }
    }
    .phone{
        width: 60rpx;
        height: 60rpx;
    }
}

.title-item{
    .export{
        width: 202rpx;
        border-radius: 30rpx;
		background: $green;
		height: 60rpx;
    }
    .export-text{
        color: #FFFFFF;
        margin-left: 33rpx;
    }
    .export-bg{
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        background: #7FEABC;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .export-img{
        width: 40rpx;
        height: 40rpx;
    }
}
.popup-top-box{
    .time-box{
        @include padding-box(60rpx 30rpx 48rpx 30rpx);
        .time{
            @include padding-box(28rpx 58rpx);
            background: #FAFAFC;
            color: #9497B1;
            font-size: 32rpx;
            border-radius: 8rpx;
        }
        .time-active{
            color: #00D679;
        }
    }
    .btn-box{
        @include padding-box(28rpx 0);
        border-top: 1rpx solid #E8E9EA;
    }
    .ornament{
        width: 2rpx;
        height: 16rpx;
        background: #E8E9EA;
    }
    .btn{
        font-size: 32rpx;
        color: #202536;
        font-weight: 600;
    }
    .btn-active{
        color: #00D679;
    }
}
.fc-gray {
	color: #565868;
}
.flex-ai-start{
	align-items: flex-start;
}